<template>
  <div id="hotTopic">
    <!--上部搜索条件组件-->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>

    <div class="table-conBtn">
      <el-button v-permission="'wh:system:hotTopic:add'" type="warning" icon="el-icon-plus" @click="addBtn('')">
        添加
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>

    <!--下部table-->
    <el-table v-loading="loading" :data="tableData" stripe style="width: 100%" max-height="490" ref="table">
      <el-table-column type="index" width="60" align="center" label="序号">
        <template slot-scope="scope">
          {{ scope.$index | filterPage(searchParams.pageNum, searchParams.pageSize) }}
        </template>
      </el-table-column>

      <el-table-column
        label="频道"
        align="center"
        prop="channel"
        show-overflow-tooltip
        width="120"
      >
        <template slot-scope="scope">
          {{ scope.row.channel | filterName('topicChannel') }}
        </template>
      </el-table-column>

      <el-table-column
        label="话题名"
        prop="topicName"
        align="center"
        min-width="80"
      ></el-table-column>

      <el-table-column
        label="话题说明"
        prop="describes"
        align="center"
        min-width="80"
      >
        <template slot-scope="scope">
          {{ scope.row.describes ? scope.row.describes : '---' }}
        </template>
      </el-table-column>

      <el-table-column
        v-permission="'wh:system:hotTopic:status'"
        label="话题状态"
        align="center"
        prop="enabled"
        width="120"
      >
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.enabled"
            :active-value="true"
            :inactive-value="false"
            active-color="#1DC8A4"
            @change="changeStatus(scope.row.enabled, scope.row.topicId, scope.$index)"
          ></el-switch>
        </template>
      </el-table-column>

      <el-table-column
        label="所属圈子"
        min-width="80"
        align="center"
      >
        <template slot-scope="scope">
          {{ circleCompute(scope.row) }}
        </template>
      </el-table-column>

      <el-table-column
        label="包含帖子数"
        prop="contentCount"
        width="120"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.contentCount ? scope.row.contentCount : 0 }}
        </template>
      </el-table-column>

      <el-table-column
        label="创建话题时间"
        align="center"
        show-overflow-tooltip
        prop="recommendDate"
        width="150"
      >
      </el-table-column>

      <el-table-column label="标签操作员" prop="createdBy" align="center" min-width="120">
        <template slot-scope="{ row }" v-if="row.operatorUser">
          {{ row.operatorUser.userName }}
        </template>
      </el-table-column>

      <el-table-column fixed="right" align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button v-permission="'wh:system:hotTopic:move'" v-if="scope.row.enabled" type="text" @click="goUp(scope.row.topicId, scope.$index)">
            上移
          </el-button>
          
          <el-button v-permission="'wh:system:hotTopic:move'" v-if="scope.row.enabled" type="text" @click="goDown(scope.row.topicId, scope.$index)">
            下移
          </el-button>

          <el-button v-permission="'wh:system:hotTopic:detaile'" type="text" @click="changeView(scope.row.topicId, scope.row)">
            查看
          </el-button>

          <el-button v-permission="'wh:system:hotTopic:edit'" type="text" @click="addBtn(scope.row.topicId, scope.row)">
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>

    <dialogAddEdit
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
      @refresh="refresh"
    ></dialogAddEdit>
    
  </div>
</template>

<script>
import { sysNormalDisable } from '@utils/dictionariesFunc'
import { getHotList, stop, open, up, down } from '@/api/contentTags/hotTopic' // 接口
import topSearch from '@component/contentTags/hotTopic/topSearch' // 上部搜索条件
import dialogAddEdit from '@component/contentTags/hotTopic/dialogAddEdit' // 新增弹窗
import { saveScrollMixins } from '@/mixins/saveScroll'
export default {
  name: 'rec',
  msg: '标签推荐',
  mixins: [saveScrollMixins],
  components: {
    topSearch,
    dialogAddEdit
  },
  data() {
    return {
      loading: false,
      textLoad: false,
      total: 0,
      tableData: [], // table内容
      pageName: 'hotTopic',
      attrList: {}, //属性对象
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      searchChannel: '',
      formInline: {
        // 搜索条件
        channel: '', // 频道
        enabled: '', // 话题状态
        topicName: '', // 话题名称
        circleIds: '', // 所属圈子
        recommendStartDate: '', // 开始时间
        recommendEndDate: '' // 结束时间
      },
      dialogData: {
        //新增弹窗
        id: '', // 有id为编辑；无id为新增
        row: {}, //当前行数据
        isShow: false, // 默认隐藏
        type: false, // 是否预览
      },
      powerStr: 'system:hotTopic:list', // 是否查询的标识
      canGetList: true, // 是否可以查询列表
      powerAry: [], // 可显示的权限
      canShowPage: false // 是否显示当前页面
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    // 获取权限
    // this.getPower()
    //属性
    this.getAttr()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        this.canShowPage = true
        if (!res.includes(this.powerStr)) {
          this.canGetList = false
          this.alertPower(this.powerStr)
        }
      })
    },

    async getAttr() {
      let list = await sysNormalDisable('sys_labels_attribute')
      list.forEach((item) => {
        this.attrList[item.dictValue] = item.dictLabel
      })
    },

    /* 获取列表 */
    searchList() {
      /*console.log('获取列表')*/
      if (!this.canGetList) return
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      getHotList(obj, (response) => {
        this.searchChannel = this.formInline.channel
        this.loading = false
        this.tableData = response.rows
        this.total = response.total
      },(response) => {
          this.loading = false
          this.$message.warning(response.message)
        }
      )
    },

    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },

    /* 创建标签 */
    addBtn(id = '', row = {}) {
      this.dialogData.id = id
      this.dialogData.row = row
      this.dialogData.isShow = true
      this.dialogData.type = false
    },

    // 状态切换提示
    async changeStatus(status, id, index) {
      if (status === false) {
        // 停用
        this.$confirm(`确定停用话题吗？`, '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          stop(id, (response) => {
            this.$message.success('操作成功')
            this.searchList()
          },(response) => {
            this.tableData[index].enabled = true
            this.$message.warning(response.message)
          })
        }).catch(() => {
          this.tableData[index].enabled = true
        })

      } else {
        // 启用
        this.$confirm(`确定启用话题吗？`, '系统提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          open(id, (response) => {
            this.$message.success('操作成功')
            this.searchList()
          },(response) => {
            this.tableData[index].enabled = false
            this.$message.warning(response.message)
          })
        }).catch(() => {
          this.tableData[index].enabled = false
        })
      }
    },

    /*上移*/
    goUp(topicId, index) {
      let { pageNum } = this.searchParams
      if (index === 0 && pageNum == 1) {
        this.$message.warning('已经是第一条数据，无法上移')
        return
      }
      up(topicId, (response) => {
        if (index === 0) {
          //当前列表第一条数据，上移需请求接口
          this.searchList()
          this.$message.success('操作成功')
          return
        }
        let cur = this.tableData[index]
        this.tableData.splice(index, 1)
        this.tableData.splice(index - 1, 0, cur)
        this.$message.success('操作成功')
      }, (response) => {
          this.$message.warning('操作失败,' + response.message)
      })
    },

    /*下移*/
    goDown(topicId, index) {
      let { pageNum, pageSize } = this.searchParams
      let lastIndex = this.tableData.length - 1
      if (index === lastIndex && pageNum * pageSize >= this.total) {
        this.$message.warning('已经是最后一条数据，无法下移')
        return
      }

      down(topicId, (response) => {
        if (index === lastIndex) {
          //当前列表最后一条数据，下移需请求接口
          this.searchList()
          this.$message.success('操作成功')
          return
        }
        let item = this.tableData[index]
        this.tableData.splice(index, 1)
        this.tableData.splice(index + 1, 0, item)
        this.$message.success('操作成功')
      },(response) => {
          this.$message.warning('操作失败,' + response.message)
        }
      )
    },

    circleCompute(row) {
      if(row.channelTopicsCircles.length > 0) {
        return row.channelTopicsCircles.map((i) => { return i.circleName }).join()
      } else {
        return '---'
      }
    },

    /* 跳转页面 */
    changeView(id = '', row = {}) {
      // let query = { channel: this.searchChannel, id }
      // this.$router.push({
      //   name: 'wh:poly:content:show:hot',
      //   query: query
      // })
      this.dialogData.id = id
      this.dialogData.row = row
      this.dialogData.isShow = true
      this.dialogData.type = true
    },

    /* 新增编辑后，刷新列表 */
    refresh() {
      this.searchList()
    },

    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>

<style lang="less">
#hotTopic {
  .oneLine {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
